<template>
  <div class="app-main-container">
    <div
      class="edit-entrance"
      style="
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
      "
    >
      <div class="property-title">快捷入口</div>
      <div class="initial-config" @click="entranceManager">
        <img
          :src="manager"
          alt=""
          class="cnfig-icon"
          style="vertical-align: middle"
        >
        <!-- <span class="title">管理</span> -->
      </div>
    </div>
    <div class="entrance-list">
      <div
        v-for="(item, index) in entranceList"
        :key="index"
        class="entrance-item"
        @click="clickItem(item)"
      >
        <img :src="item.imgPath" alt="" class="icon">
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="data-show">
      <div v-for="(item, index) in dataShow" :key="index" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="unit-money">
          <div v-if="item.unit" class="unit">
            {{ item.unit }}
            <span class="num">{{ item.unitNum }}</span>
          </div>
          <div class="money">
            ¥<span class="num">{{ item.money }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-box">
      <div class="chart-area-booking-box">
        <div class="ab_btn" @click="areaSubscribe">预定</div>
        <div class="chart-title flex-cb">
          <div>
            <div class="title">今日场地预定</div>
            <el-select v-model="selectProName" @change="conditionChange">
              <el-option
                v-for="item in projects"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="flex-c">
          <canvas ref="canvas" class="canvas" width="200" height="200" />
          <!-- <img style="width: 250px" src="https://5b0988e595225.cdn.sohucs.com/images/20200504/cc14d246006e47d68da57176b16c41cc.gif" alt=""> -->
          <div ref="chartAreaBooking" class="chart-area-booking" />
        </div>
      </div>
      <div class="chart-combo-sell-box">
        <div class="ab_btn" @click="mealSale">售卖</div>
        <div class="chart-title flex-cb">
          <div class="title">今日套餐售卖</div>
          <!-- <div>
            <el-button type="text" @click="mealSale">售卖</el-button>
            <el-button type="text" @click="moreMealList">更多</el-button>
          </div> -->
        </div>
        <div ref="chartComboSell" class="chart-combo-sell" />
      </div>
      <div class="chart-tickets-sell-box">
        <div class="ab_btn" @click="ticketSale">售卖</div>
        <div class="chart-title flex-cb">
          <div>
            <div class="title">今日门票</div>
          </div>
          <!-- <div>
            <el-button type="text" @click="ticketSale">售卖</el-button>
          </div> -->
        </div>
        <div ref="chartTicketsSell" class="chart-tickets-sell" />
      </div>
    </div>
    <el-dialog
      title="快捷入口管理"
      :visible.sync="showEntranceManager"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :before-close="cancelMotify"
      width="850px"
    >
      <div class="placeholder9 mb10">
        请根据使用习惯自定义快捷入口，支持拖动排序
      </div>
      <!-- <div class="desc margin-t-10" style="font-size: 14px">最多可添加6个</div> -->
      <!-- <el-table
        ref="EntranceManagerRef"
        :data="showEntranceList"
        :show-header="false"
        style="width: 100%"
        fit
        class="doumee-element-table margin-t-20"
      >
        <el-table-column align="center" label="头像" width="80" prop="imgPath">
          <template slot-scope="scope">
            <el-image
              fit="contain"
              :src="scope.row.imgPath"
              :preview-src-list="[scope.row.imgPath]"
            />
          </template>
        </el-table-column>
        <el-table-column align="left" label="商品名称" prop="name">
          <template v-slot="scope">
            <div class="df_ac">
              <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.name"
                class="w200"
                maxlength="5"
                @blur="scope.row.isEdit = false"
              />
              <i
                class="el-icon-edit primaryColor pointer ml20"
                style="font-size: 16px"
                @click="scope.row.isEdit = !scope.row.isEdit"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.sel == false"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >添加</el-button>
            <el-button
              v-if="scope.row.sel == true"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <Draggable v-model="showEntranceList" class="Entr_list_warp" draggable=".item">
        <div v-for="item in showEntranceList" :key="item.id" class="item">
          <img class="img" :src="item.imgPath" alt="">
          <el-input v-model="item.name" show-word-limit :maxlength="5" />
          <el-checkbox
            v-model="item.sel"
            class="checkbox"
          />
          <img class="drag" src="@/assets/icon/drag.png">
        </div>
      </Draggable>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMotify">取消</el-button>
        <el-button
          v-preventReClick
          :loading="EntranceLoading"
          type="primary"
          @click="confirmMotify"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showEnterWriteOff"
      width="60%"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeWriteOff"
    >
      <div slot="title">
        <span>{{ fastTitle }}</span>
        <span
          class="primaryColor ml10 underline pointer"
          @click="outinRecord"
        >出入场记录</span>
      </div>
      <el-form
        ref="enterWriteOffFrom"
        :model="enterWriteOffFrom"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="二维码核销：" prop="code">
          <div class="enterWriteOffCode">
            <el-input
              ref="qrcodeRef"
              v-model="enterWriteOffFrom.code"
              placeholder="请扫描/输入二维码内容"
              style="flex: 1"
              clearable
              :disabled="enterWriteOffFrom.name?true: false"
              @input="codeChange"
            />
          </div>
        </el-form-item>
        <el-form-item label="会员核销：" prop="name">
          <el-autocomplete
            v-model="enterWriteOffFrom.name"
            :fetch-suggestions="queryMemberAsync"
            style="width: 100%"
            placeholder="请输入会员实体卡号/手机号"
            :disabled="enterWriteOffFrom.code?true: false"
            clearable
            @select="handleMemberSelect"
          />
        </el-form-item>
      </el-form>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>当日可用票券</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="">
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.code"
                class="info_item"
                :class="{ active: item.code === activeTicketItem.code }"
                @click="ticketItemClick(item)"
              >
                <h2>{{ item.name }}</h2>
                <div class="line">
                  <span v-if="item.areaName" class="6">适用场地：</span>
                  <span v-if="item.areaName" class="mr10">{{
                    item.areaName
                  }}</span>
                  <span>{{ item.siteModelName }}</span>
                </div>
                <div class="line">
                  <span
                    v-if="item.expirationTime"
                    class="span6"
                  >到期日期：<span class="primaryColor">{{
                    item.expirationTime
                  }}</span></span>
                  <span
                    v-if="item.useTime"
                    class="span4"
                  >使用时间：{{ item.useTime }}</span>
                </div>
                <div class="line">
                  <span
                    v-if="item.itemName"
                    class="span6"
                  >适用项目：{{ item.itemName }}</span>
                  <template
                    v-if="item.residueDegree && item.residueDegree != '0/0'"
                  >
                    <span
                      v-if="
                        item.type == 41 || item.type == 32 || item.type == 42
                      "
                      class="span4"
                    >使用情况：
                      <template v-if="item.residueDegree.indexOf('/不限') > 0">
                        人数不限
                      </template>
                      <template v-else>
                        已使用{{ item.residueDegree
                        }}{{ item.type == 41 || item.type == 42 ? "次" : "人" }}
                      </template>
                    </span>
                  </template>
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">真实姓名：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">性别：</span>{{
                verificatInfo.sex === "1"
                  ? "男"
                  : verificatInfo.sex === "2"
                    ? "女"
                    : "保密"
              }}
            </div>
            <div class="line">
              <span class="key">身份证号：</span>{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">会员卡号：</span>{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">充值余额：</span>{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">赠送余额：</span>{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">积分余额：</span>{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="verificat_footer">
        <div
          v-if="TicketAbleResult && activeTicketItem.code"
          class="verificat_num_wrap df_ac"
        >
          <span
            v-if="
              activeTicketItem.type == '41' &&
                activeTicketItem.residueDegree != '0/0'
            "
          >核销次数：</span>
          <el-input-number
            v-if="
              activeTicketItem.type == '41' &&
                activeTicketItem.residueDegree != '0/0'
            "
            v-model="verificatNum"
            class="ml20 mr30"
            size="medium"
            :min="1"
          />
          <el-checkbox
            v-model="verificatPrint"
            @change="changePrint"
          >打印小票</el-checkbox>
        </div>
        <div />
        <div>
          <el-button @click="showEnterWriteOff = false">取消</el-button>
          <el-button
            type="primary"
            :loading="ticketLoading"
            @click="verificationCode"
          >确认核销</el-button>
        </div>
      </div>
    </el-dialog>
    <el-drawer
      v-if="showMt"
      :title="fastTitle"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showMt"
      size="800px"
      @close="closeMt"
    >
      <el-form ref="mtForm" :model="mtForm" :rules="rules" label-width="100px">
        <el-form-item label="会员信息：" prop="memberId">
          <div>
            <MemberSearch
              ref="memberSearchRef"
              @clear="tgMemberClear"
              @select="tgMemberSelect"
            />
            <div
              v-if="tgMemberInfo && tgMemberInfo.nickName"
              class="member_info"
            >
              <div class="item">姓名：{{ tgMemberInfo.nickName }}</div>
              <div class="item">手机号：{{ tgMemberInfo.phone }}</div>
              <div class="item">会员等级：{{ tgMemberInfo.cardName }}</div>
              <div class="item">
                充值余额：<span>{{ tgMemberInfo.rechargeMoney || 0 }}</span>
              </div>
              <div class="item">
                赠送余额：<span>{{ tgMemberInfo.giveMoney || 0 }}</span>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item
          v-if="tgMemberInfo && tgMemberInfo.id"
          class="mt20"
          label="团购码："
          prop="tgm"
        >
          <div class="enterWriteOffCode">
            <el-input
              v-model="mtForm.tgm"
              placeholder="请输入团购码"
              style="flex: 1"
              clearable
            />
            <div style="width: 20px" />
            <!-- <el-button
              type="primary"
              @click="verificationCodeb"
            >查询</el-button> -->
            <el-button
              :loading="yzLoading"
              type="primary"
              @click="yzBtn"
            >验证</el-button>
          </div>
        </el-form-item>
        <el-form-item prop="detail">
          <div v-if="isShowMt">
            <template v-for="(item, index) in mtObj">
              <div :key="index" class="order-type">
                {{ item.name }}({{ item.couponTypeName }}) ({{
                  item.proTypeName
                }}) ({{ item.saleStatusName }})
              </div>
              <div v-if="item.showInfo" :key="index">
                {{ item.showInfo }}
              </div>
              <el-button
                v-if="item.proType == 1"
                :key="index"
                type="primary"
                @click="jumpBtn(item.code)"
              >去使用</el-button>
            </template>
          </div>
          <div v-else class="error-style">查询不通过，请重新输入</div>
        </el-form-item>
      </el-form>
    </el-drawer>
    <VipAdd
      v-if="isShowVipAdd"
      ref="VipAddRef"
      @register="memberAdd"
      @close="isShowVipAdd = false"
    />
    <VipRecharge
      v-if="isShowVipRecharge"
      ref="VipRechargeRef"
      @close="isShowVipRecharge = false"
    />
    <MemberAdd
      v-if="isShowMemberAdd"
      ref="MemberAddRef"
      @submit="toVipAdd"
      @close="isShowMemberAdd = false"
    />
    <Bracelet ref="Bracelet" @success="jumpBracelet" />
    <ReleTicket ref="ReleTicketRef" @success="payBtn" />
    <orderDialog ref="child" />
    <Unbinding ref="Unbinding" />
    <Application v-if="ShowApplication" ref="Application" @close="ShowApplication = false" />
    <Signin ref="Signin" />
    <Orienteering v-if="showOrienteering" ref="OrienteeringRef" @close="showOrienteering = false" />
    <Parking v-if="showParking" ref="ParkingRef" @close="showParking = false" />
    <el-dialog
      :visible.sync="showActivityWriteOff"
      width="60%"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeActivityWriteOff"
    >
      <div slot="title">
        <span>{{ fastTitle }}</span>
        <span
          class="primaryColor ml10 underline pointer"
          @click="outinRecordb"
        >报名记录</span>
      </div>
      <el-form
        ref="enterWriteOffFrom"
        :model="enterWriteOffFrom"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="二维码核销：" prop="code">
          <div class="enterWriteOffCode">
            <el-input
              ref="qrcodeRefb"
              v-model="enterWriteOffFrom.code"
              placeholder="请扫描/输入二维码内容"
              style="flex: 1"
              clearable
              :disabled="enterWriteOffFrom.name?true: false"
              @input="codeChangeb"
            />
          </div>
        </el-form-item>
        <el-form-item label="会员核销：" prop="name">
          <el-autocomplete
            v-model="enterWriteOffFrom.name"
            :fetch-suggestions="queryMemberAsync"
            style="width: 100%"
            placeholder="请输入会员实体卡号/手机号"
            :disabled="enterWriteOffFrom.code?true: false"
            clearable
            @select="handleMemberSelectb"
          />
        </el-form-item>
      </el-form>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>报名记录</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="">
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.code"
                class="info_item"
                :class="{ active: activeTicketList.indexOf(item.id) > -1 }"
                @click="ticketItemClickb(item)"
              >
                <h2>{{ item.acName }}</h2>
                <div v-if="item.studentName" class="line">
                  <span
                    class="span6"
                  >报名学员：<span class="primaryColor">{{
                    item.studentName
                  }}</span></span>
                </div>
                <div v-if="item.acTime" class="line">
                  <span
                    class="span6"
                  >活动时间：<span class="primaryColor">{{
                    item.acTime
                  }}</span></span>
                </div>
                <div v-if="item.acAddr" class="line">
                  <span
                    class="span6"
                  >活动地点：{{ item.acAddr }}</span>
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">真实姓名：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">性别：</span>{{
                verificatInfo.sex === "1"
                  ? "男"
                  : verificatInfo.sex === "2"
                    ? "女"
                    : "保密"
              }}
            </div>
            <div class="line">
              <span class="key">身份证号：</span>{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">会员卡号：</span>{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">充值余额：</span>{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">赠送余额：</span>{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">积分余额：</span>{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="verificat_footer">
        <div />
        <div>
          <el-button @click="showActivityWriteOff = false">取消</el-button>
          <el-button
            type="primary"
            :loading="activityLoading"
            @click="verificationCodec"
          >确认核销</el-button>
        </div>
      </div>
    </el-dialog>
    <EscortBuy v-if="showEscortBuy" ref="EscortBuy" @success="escordOrder" @close="showEscortBuy = false" />
    <EscortOff v-if="showEscortOff" ref="EscortOff" @close="showEscortOff = false" />
  </div>
</template>

<script>
import {
  getProjectList,
  workData,
  benchInfo,
  mealInfo,
  checkCouponByInput,
  workBenchList,
  myWorkBench,
  editMyWorkBench,
  getCheckCode,
  memberList,
  batchHXSign,
  memberDetailInfo,
  affirmCheckGetMeals,
  verificatList,
  signRecordList,
  jumpBracelet,
  printOrder
} from '@/api'
import store from '@/store'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts'
import { debounce } from '@/utils/debounce'
import VipAdd from '@/views/vipCard/vipAdd/index.vue'
import VipRecharge from '@/views/vipList/vipRecharge/index.vue'
import Bracelet from './components/bracelet.vue'
import ReleTicket from './components/releTicket.vue'
import orderDialog from '@/components/order'
import MemberAdd from '@/views/vipList/memberAdd/index.vue'
import Unbinding from '../vipList/associationList/components/unbinding.vue'
import MemberSearch from '@/components/MemberSearch'
import Application from './components/application.vue'
import Signin from './components/signin.vue'
import Parking from './components/parking.vue'
import Orienteering from './components/orienteering.vue'
import EscortBuy from './components/escortBuy.vue'
import EscortOff from './components/escortOff.vue'
import Draggable from 'vuedraggable'
export default {
  name: 'Home',
  components: {
    VipAdd,
    orderDialog,
    Unbinding,
    Parking,
    Bracelet,
    VipRecharge,
    ReleTicket,
    MemberAdd,
    MemberSearch,
    Application,
    Signin,
    EscortBuy,
    EscortOff,
    Draggable,
    Orienteering
  },
  data() {
    return {
      fastTitle: '',
      showEscortBuy: false,
      showEscortOff: false,
      isShowVipAdd: false,
      activityLoading: false,
      isShowVipRecharge: false,
      isShowMemberAdd: false,
      ShowApplication: false,
      showOrienteering: false,
      showParking: false,
      yzLoading: false,
      modalDialog: store.getters.dialog,
      EntranceLoading: false,
      tgMemberInfo: {},
      verificatInfo: {},
      activeTicketItem: {
        code: ''
      },
      activeTicketList: [],
      TicketAbleList: [],
      TicketAbleResult: false,
      ticketLoading: false,
      default_pic: require('@/icons/png/default_pic.png'),
      manager: require('@/icons/png/ic_guanli.png'),
      showMt: false,
      mtForm: {},
      entranceList: [
        {
          icon: require('@/icons/png/home_nav_vipcard.png'),
          name: '会员开卡',
          path: 'VipAdd'
        },
        {
          icon: require('@/icons/png/home_nav_changdi.png'),
          name: '场地预约',
          path: 'AreaReserve'
        },
        {
          icon: require('@/icons/png/home_nav_shangpingshoumai.png'),
          name: '商品售卖',
          path: 'GoodsSale'
        },
        {
          icon: require('@/icons/png/home_nav_menpiao.png'),
          name: '门票售卖',
          path: 'TicketSell'
        },
        {
          icon: require('@/icons/png/home_nav_taocan.png'),
          name: '套餐售卖',
          path: 'ComboSell'
        },
        {
          icon: require('@/icons/png/home_nav_vipchongzhi.png'),
          name: '会员充值',
          path: 'VipRecharge'
        }
      ],
      dataShow: [
        { title: '今日营收', money: '0.00', unit: '', unitNum: '0' },
        { title: '今日订场', money: '0.00', unit: '订场', unitNum: '0' },
        { title: '今日门票', money: '0.00', unit: '购票', unitNum: '0' },
        { title: '今日套餐', money: '0.00', unit: '订单', unitNum: '0' }
      ],
      // lastTime: 10,
      ticketsName: [],
      ticketSales: [],
      ticketLess: [],
      projects: [],
      selectProName: '',
      benchInfo: {},
      meals: [],
      showSqy: false,
      meaLyAxis: [],
      mealseries: [],
      showEntranceList: [],
      showEntranceManager: false,
      showEnterWriteOff: false, // 核销
      showActivityWriteOff: false,
      verificatNum: 0,
      verificatPrint: false,
      isShowMt: true,
      mtObj: [],
      enterWriteOffFrom: {
        code: '',
        name: '',
        detail: {}
      },
      rules: {
        // code: [
        //   { required: true, message: '请输入进场码', trigger: 'blur' }
        // ],
        tgm: [{ required: true, message: '请输入团购码', trigger: 'blur' }]
      },
      isChecked: true
    }
  },
  computed: {
    lastTime() {
      return Number(this.allDuration) - Number(this.reserveDuration)
    }
  },
  created() {
    const isPrint = localStorage.getItem('isPrint') || ''
    this.verificatPrint = isPrint === 'true'
    this.getVenueWorkBenchList()
  },
  mounted() {
    this.showSqy = false
    const auth_code = this.$route.query.auth_code
    this.auth_code = auth_code
    this.getInitData()
  },
  methods: {
    // 手环
    jumpBracelet(braceletId) {
      jumpBracelet({ param: { braceletId }}).then((res) => {
        if (res.errorCode !== '000000') return

        if (res.record.type === '1') {
          this.$refs.ReleTicketRef.show(braceletId)
        } else {
          this.$refs.Unbinding.show(res.record)
        }
      })
    },
    escordOrder(orderId) {
      this.$refs.child.continuePay(orderId, 'escort')
    },
    // 验证
    yzBtn() {
      const that = this
      this.$refs.mtForm.validate((v) => {
        if (v) {
          that.yzLoading = true
          affirmCheckGetMeals({
            param: {
              code: that.mtForm.tgm,
              num: 1,
              memberId: that.tgMemberInfo.id,
              venueId: sessionStorage.getItem('venueId')
            }
          })
            .then((res) => {
              that.yzLoading = false
              if (res.errorCode === '000000') {
                that.$message.success('验券成功')
              }
            })
            .catch(() => {
              that.yzLoading = false
            })
        }
      })
    },
    tgMemberSelect(item) {
      const fn = () => {
        this.tgMemberInfo = item
        // this.$set(this.param, 'memberId', item.id)
      }
      fn()
    },
    tgMemberClear() {
      this.tgMemberInfo = {}
    },
    payBtn(row) {
      this.$refs.child.continuePay(row, 'bracelet')
    },
    // 手环结束
    areaSubscribe() {
      this.$router.push({ name: 'AreaReserve' })
    },
    // formatString(str) {
    //   return str.replaceAll('/', ' | ')
    // },
    memberAdd(value) {
      // this.$router.push({ name: 'MemberAdd' })
      this.isShowMemberAdd = true
      this.$nextTick(() => {
        this.$refs.MemberAddRef.param.phone = value || ''
        this.$refs.MemberAddRef.isShowMember = true
      })
    },
    toVipAdd(info) {
      this.isShowVipAdd = true
      this.$nextTick(() => {
        this.$refs.VipAddRef.isShow = true
        if (info) {
          this.$refs.VipAddRef.memberSelect(info)
        }
      })
    },
    queryMemberAsync(queryString, cb) {
      const data = {
        pagination: {
          firstQueryTime: '',
          page: 1,
          rows: 100
        },
        param: {
          keyword: queryString
        }
      }
      memberList(data).then((res) => {
        if (res.errorCode !== '000000') return
        const result = res.recordList
        this.verificatInfo = {}
        this.TicketAbleList = []
        result.forEach((item) => {
          item.value = item.nickName
          if (item.phone) {
            item.value += '-' + item.phone
          }
          if (item.cardName) {
            item.value += '（' + item.cardName + '）'
          }
        })
        cb(result)
      })
    },
    codeChangeb: debounce(function() {
      this.verificatInfo.id = ''
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.verificatNum = 1
      // this.activeTicketItem = {}
      this.activeTicketList = []
      signRecordList({ param: { acCode: this.enterWriteOffFrom.code, status: '0' }}).then(
        (res) => {
          if (res.errorCode === '000000' && res.recordList.length > 0) {
            this.TicketAbleResult = true
            this.$nextTick(() => {
              if (res.recordList.length > 0) {
                // this.activeTicketItem = res.recordList[0]
                this.activeTicketList = [res.recordList[0].id]
              }
              this.TicketAbleList = res.recordList || []
            })
          } else {
            this.TicketAbleResult = true
          }
        }
      )
    }, 500),
    codeChange: debounce(function() {
      this.verificatInfo.id = ''
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.verificatNum = 1
      this.activeTicketItem = {}
      verificatList({ param: { code: this.enterWriteOffFrom.code }}).then(
        (res) => {
          if (res.errorCode === '000000' && res.recordList.length > 0) {
            this.TicketAbleResult = true
            this.$nextTick(() => {
              if (res.recordList.length > 0) {
                this.activeTicketItem = res.recordList[0]
              }
              this.TicketAbleList = res.recordList || []
            })
          } else {
            this.TicketAbleResult = true
          }

          // this.enterWriteOffFrom.detail = res.recordList[0]
        }
      )
    }, 500),
    // },
    handleMemberSelectb(item) {
      const { id } = item
      this.verificatInfo.id = ''
      this.TicketAbleList = []
      this.TicketAbleResult = false
      // this.activeTicketItem = {}
      this.activeTicketList = []
      this.verificatNum = 1
      memberDetailInfo({ param: { memberId: id }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.verificatInfo = res.record
        signRecordList({ param: { userInfo: res.record.phone, status: '0' }}).then((resb) => {
          if (resb.errorCode !== '000000') return
          this.TicketAbleResult = true
          this.$nextTick(() => {
            this.TicketAbleList = resb.recordList
            if (resb.recordList.length > 0) {
              this.activeTicketList = [resb.recordList[0].id]
              // this.activeTicketItem = resb.recordList[0]
            }
          })
        })
      })
    },
    handleMemberSelect(item) {
      const { id } = item
      this.verificatInfo.id = ''
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      this.verificatNum = 1
      memberDetailInfo({ param: { memberId: id }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.verificatInfo = res.record
        verificatList({ param: { memberId: id }}).then((resb) => {
          if (resb.errorCode !== '000000') return
          this.TicketAbleResult = true
          this.$nextTick(() => {
            this.TicketAbleList = resb.recordList
            if (resb.recordList.length > 0) {
              this.activeTicketItem = resb.recordList[0]
            }
          })
        })
      })
    },
    ticketItemClick(item) {
      this.verificatNum = 1
      this.activeTicketItem = item
      console.log(this.activeTicketItem)
    },
    ticketItemClickb(item) {
      const arr = [...this.activeTicketList]
      const index = arr.indexOf(item.id) // 找到要删除的元素的索引
      if (index !== -1) { // 确保元素存在于数组中
        arr.splice(index, 1) // 删除一个元素
      } else {
        arr.push(item.id)
      }
      this.activeTicketList = arr
    },
    sqBtn() {
      // this.showSqy = true
      window.location.href =
        'https://e.dianping.com/dz-open/merchant/auth?app_key=2bfda436de2798fe&redirect_url=https://franchise-public-dev.kidsplace.cn/home&state=teststate&scope=[%22tuangou%22,%22ugc%22]'
    },
    closeSqy() {
      this.showSqy = false
    },
    mealSale() {
      this.$router.push({ name: 'ComboSell' })
    },
    moreMealList() {
      this.$router.push({ name: 'ComboOrderList' })
    },
    ticketSale() {
      this.$router.push({ name: 'TicketSell' })
    },
    conditionChange() {
      this.getBenchInfo(this.selectProName)
    },
    getInitData() {
      workData({
        param: {
          stadiumId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const total = this.dataShow[0]
            total.money = res.record.totalMoney
            this.dataShow[0] = total
            const gather = res.record.orderType
            gather.forEach((item) => {
              switch (item.name) {
                case '02': {
                  const subscribe = this.dataShow[1]
                  subscribe.money = item.price
                  subscribe.unitNum = item.num
                  this.dataShow[1] = subscribe
                  break
                }
                case '03': {
                  const ticket = this.dataShow[2]
                  ticket.money = item.price
                  ticket.unitNum = item.num
                  this.dataShow[2] = ticket
                  break
                }
                case '04': {
                  const meal = this.dataShow[3]
                  meal.money = item.price
                  meal.unitNum = item.num
                  this.dataShow[3] = meal
                  break
                }
                default: {
                  break
                }
              }
            })
            const tickets = res.record.tickList
            tickets.forEach((ticket) => {
              this.ticketsName.push(ticket.name)
              this.ticketSales.push(ticket.xl)
              this.ticketLess.push(ticket.yl)
            })
            this.renderChartTicketsSell()
          }
        })
        .catch((err) => {
          console.log('--失败', err)
        })
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({
        param: {
          venueId,
          type: '0',
          status: '1'
        }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.projects = res.recordList
        if (res.recordList.length > 0) {
          this.selectProName = res.recordList[0].id
          // this.activeProject = res.recordList[0].id
          // this.toGetAreaListByProjectId(res.recordList[0].id)
          this.getBenchInfo(this.selectProName)
        }
      })
      mealInfo({ param: { venueId }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.meals = res.record
        res.record.forEach((meal) => {
          this.meaLyAxis.push(meal.name)
          this.mealseries.push(Number(meal.num))
        })
        this.renderChartComboSell()
      })
    },
    getVenueWorkBenchList() {
      const param = { id: sessionStorage.getItem('userId') }
      myWorkBench({ param, userId: sessionStorage.getItem('userId') }).then(
        (res) => {
          if (res.errorCode !== '000000') return
          this.entranceList = res.recordList
        }
      )
    },
    getBenchInfo(id) {
      benchInfo({ param: { id }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.benchInfo = res.record
        this.canvasRender()
        this.renderChartAreaBooking()
        // console.log( Number(this.benchInfo.allDuration) -  Number(this.benchInfo.reserveDuration));
      })
    },
    clickItem(item) {
      const { path } = item
      if (path === 'SpecialCard') {
        this.showOrienteering = true
        this.$nextTick(() => {
          this.$refs.OrienteeringRef.isShowModal = true
        })
        return
      }
      if (path === 'Parking') {
        this.showParking = true
        this.$nextTick(() => {
          this.$refs.ParkingRef.isShowModal = true
        })
        return
      }
      if (path === 'EnterWriteOff') {
        this.showEnterWriteOff = true
        this.enterWriteOffCode = {}
        this.fastTitle = item.name
        this.$nextTick(() => {
          this.$refs.qrcodeRef.focus()
        })
        return
      }
      if (path === 'ActivityWriteOff') {
        this.showActivityWriteOff = true
        this.activeTicketList = []
        this.enterWriteOffCode = {}
        this.fastTitle = item.name
        this.$nextTick(() => {
          this.$refs.qrcodeRefb.focus()
        })
        return
      }
      if (path === 'InvoiceMember') {
        this.$router.push('/application/invoice')
        return
      }
      if (path === 'MtCheck') {
        this.showMt = true
        this.fastTitle = item.name
        this.tgMemberClear()
        this.mtForm = {}
        return
      }
      if (path === 'Bracelet') {
        this.$refs.Bracelet.title = item.name
        this.$refs.Bracelet.open()
        return
      }
      if (path === 'VipAdd') {
        this.isShowVipAdd = true
        this.$nextTick(() => {
          this.$refs.VipAddRef.isShow = true
        })
        return
      }
      if (path === 'CourseApply') {
        this.ShowApplication = true
        this.$nextTick(() => {
          this.$refs.Application.title = item.name
          this.$refs.Application.showClick()
        })
        return
      }
      if (path === 'CourseSignIn') {
        this.$nextTick(() => {
          this.$refs.Signin.title = item.name
          this.$refs.Signin.open()
        })
        return
      }
      if (path === 'EscortBuy') {
        this.$nextTick(() => {
          this.showEscortBuy = true
          this.$nextTick(() => {
            this.$refs.EscortBuy.title = item.name
            this.$refs.EscortBuy.open()
          })
        })
        return
      }
      if (path === 'EscortOff') {
        this.$nextTick(() => {
          this.showEscortOff = true
          this.$nextTick(() => {
            this.$refs.EscortOff.title = item.name
            this.$refs.EscortOff.open()
          })
        })
        return
      }
      if (path === 'VipRecharge') {
        this.isShowVipRecharge = true
        this.$nextTick(() => {
          this.$refs.VipRechargeRef.isShow = true
          this.$refs.VipRechargeRef.param = {}
        })
        return
      }
      this.$router.push({ name: path })
    },
    // 今日场地预定 图表初始化
    renderChartAreaBooking() {
      const chartAreaBooking = echarts.init(this.$refs.chartAreaBooking)
      chartAreaBooking.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: 'center',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: false },
            data: [
              {
                value: Number(this.benchInfo.fixedDuration),
                name:
                  '固定场地：' + Number(this.benchInfo.fixedDuration) + '小时'
              },
              {
                value: Number(this.benchInfo.pcDuration),
                name: '前台预定：' + Number(this.benchInfo.pcDuration) + '小时'
              },
              {
                value: Number(this.benchInfo.appDuration),
                name:
                  '网络预定：' + Number(this.benchInfo.appDuration) + '小时'
              }
            ]
          }
        ]
      })
    },
    // 今日套餐售卖 图表初始化
    renderChartComboSell() {
      const chartComboSell = echarts.init(this.$refs.chartComboSell)
      chartComboSell.setOption({
        grid: {
          left: '80px',
          top: '0%',
          bottom: '20%',
          right: '60px'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          data: this.meaLyAxis
        },
        series: [
          {
            data: this.mealseries,
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#59C9EB',
                label: {
                  show: true, // 开启显示
                  position: 'right', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          }
        ]
      })
    },
    // 今日门票 图表初始化
    renderChartTicketsSell() {
      const chartTicketsSell = echarts.init(this.$refs.chartTicketsSell)
      chartTicketsSell.setOption({
        grid: {
          left: '60px',
          top: '10px',
          bottom: '35%',
          right: '0px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            interval: 0,
            formatter: function(value) {
              // return value.split('').join('\n')
              return value
            }
          },
          data: this.ticketsName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            data: this.ticketSales,
            type: 'bar',
            name: '日销量',
            barWidth: 210 / this.ticketSales.length,
            itemStyle: {
              color: '#435EBE'
            }
          },
          {
            // data: [110, 400, 120, 50, 40, 110, 100],
            data: this.ticketLess,
            type: 'bar',
            name: '剩余票数',
            barWidth: 210 / this.ticketSales.length,
            itemStyle: {
              color: '#59C9EB'
            }
          }
        ]
      })
    },
    canvasRender() {
      var that = this
      // console.log((Number(this.benchInfo.allDuration) - Number(this.benchInfo.reserveDuration)), this.benchInfo.reserveDuration)
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const radians = (Math.PI / 180) * 180
      let startTime = Date.now()
      const time = 2000
      let clockwise = 1
      let cp1x, cp1y, cp2x, cp2y

      requestAnimationFrame(function waveDraw() {
        const t = Math.min(1.0, (Date.now() - startTime) / time)

        if (clockwise) {
          cp1x = 90 + 55 * t
          cp1y = 28 + 72 * t
          cp2x = 92 - 51 * t
          cp2y = 179 - 79 * t
        } else {
          cp1x = 145 - 55 * t
          cp1y = 100 - 72 * t
          cp2x = 41 + 51 * t
          cp2y = 100 + 79 * t
        }

        ctx.clearRect(0, 0, 200, 200)
        ctx.beginPath()
        ctx.moveTo(0, 100)
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100)
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0)
        ctx.fillStyle = '#435EBE'
        ctx.fill()
        // 设置字体
        ctx.font = '16px bold 黑体'
        ctx.fillStyle = '#333333'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(
          '剩余' +
          (Number(that.benchInfo.allDuration) -
            Number(that.benchInfo.reserveDuration)) +
          '小时',
          100,
          50
        )
        ctx.font = '16px bold 黑体'
        ctx.fillStyle = '#fff'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(
          '已预定' + that.benchInfo.reserveDuration + '小时',
          100,
          150
        )
        ctx.save()
        // eslint-disable-next-line eqeqeq
        if (t == 1) {
          startTime = Date.now()
          clockwise = !clockwise
        }
        // requestAnimationFrame(waveDraw)
      })
    },
    entranceManager() {
      this.showEntranceManager = true
      const param = { id: sessionStorage.getItem('userId') }
      workBenchList({ param, userId: sessionStorage.getItem('userId') }).then(
        (res) => {
          if (res.errorCode === '000000') {
            this.showEntranceList = res.recordList.map((item) => {
              item.isEdit = false
              item.sort = item.sort || 99999999
              return item
            })
            this.showEntranceList.sort((a, b) => (a.sort - b.sort))
            this.$nextTick(() => {
              this.$refs.EntranceManagerRef.doLayout()
            })
          }
        }
      )
    },
    handleEdit(index, row) {
      row.sel = !row.sel
    },
    handleDelete(index, row) {
      row.sel = !row.sel
    },
    cancelMotify() {
      this.showEntranceManager = false
    },
    confirmMotify() {
      if (!this.showEntranceList) {
        this.$message.warning('暂无快捷入口数据')
        return
      }
      const paramList = []
      // var count = 0
      this.showEntranceList.forEach((entrance) => {
        if (entrance.sel === true) {
          paramList.push({
            id: entrance.id,
            name: entrance.name
          })
          // count++
        }
      })
      // if (count > 6) {
      //   this.$message.warning('最多可添加6个')
      //   return
      // }
      this.EntranceLoading = true
      editMyWorkBench({
        param: { paramList },
        userId: sessionStorage.getItem('userId')
      }).then(
        (res) => {
          this.EntranceLoading = false
          if (res.errorCode === '000000') {
            this.showEntranceManager = false
            this.$message.success('编辑成功')
            this.getVenueWorkBenchList()
          }
        },
        () => {
          this.EntranceLoading = false
        }
      )
    },
    closeActivityWriteOff() {
      this.verificatInfo = {}
      this.enterWriteOffFrom = {}
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      this.showActivityWriteOff = false
    },
    closeWriteOff() {
      this.verificatInfo = {}
      this.enterWriteOffFrom = {}
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      this.isChecked = true
      this.showEnterWriteOff = false
    },
    closeMt() {
      this.isShowMt = true
      this.mtObj = []
      this.$refs.mtForm.resetFields()
    },
    jumpBtn(code) {
      this.isShowMt = true
      this.mtObj = []
      this.$refs.mtForm.resetFields()
      this.showMt = false
      this.$router.push({ name: 'AreaReserve', query: { code }})
    },
    verificationCodeb() {
      this.$refs.mtForm.validate((v) => {
        if (v) {
          checkCouponByInput({
            param: {
              code: this.mtForm.tgm,
              venueId: sessionStorage.getItem('venueId')
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.isShowMt = true
                this.mtObj = res.record
              } else {
                this.isShowMt = false
              }
            })
            .catch(() => {
              this.isShowMt = false
            })
        }
      })
    },
    verificationCode() {
      const code = this.activeTicketItem.code
      const { activeTicketItem, verificatNum, verificatPrint } = this
      if (!code) {
        this.$message.warning('请扫描/输入二维码或通过会员获取并使用可用票券')
        return
      }
      this.ticketLoading = true
      getCheckCode({
        param: {
          code: this.enterWriteOffFrom.code || code,
          num: verificatNum,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.ticketLoading = false
          if (res.errorCode !== '000000') return
          this.$message.success('核销成功')
          this.showEnterWriteOff = false
          if (verificatPrint) {
            let templateCode = ''
            if (activeTicketItem.type === '42') {
              templateCode = 'INOUT_TICKET'
            } else if (activeTicketItem.type === '32') {
              templateCode = 'INOUT_SITE'
            } else if (activeTicketItem.type === '41') {
              templateCode = 'INOUT_MEALS'
            } else {
              templateCode = 'INOUT_DEFAULT'
            }
            printOrder({
              param: {
                type: 0,
                num: verificatNum,
                useTime: activeTicketItem.useTime || '',
                qrCode: code,
                workId: res.record.orderId || '',
                productName: activeTicketItem.name,
                templateCode,
                venueId: sessionStorage.getItem('venueId')
              }
            }).then((resP) => {
              if (resP.errorCode !== '000000') return
              this.$message.success('打印成功')
            })
          }
          // this.enterWriteOffFrom.detail = res.record
        })
        .catch(() => {
          this.ticketLoading = false
        })
    },
    verificationCodec() {
      const ids = [...this.activeTicketList]
      if (!ids || ids.length === 0) {
        return this.$message.warning('请扫描/输入二维码或通过会员获取并使用可用票券')
      }
      this.activityLoading = true
      batchHXSign({
        param: {
          ids, type: '0'
        }
      })
        .then((res) => {
          this.activityLoading = false
          if (res.errorCode !== '000000') return
          this.$message.success('核销成功')
          this.showActivityWriteOff = false
        })
        .catch(() => {
          this.activityLoading = false
        })
    },
    changePrint() {
      if (this.verificatPrint) {
        localStorage.setItem('isPrint', JSON.stringify(this.verificatPrint))
      } else {
        localStorage.removeItem('isPrint')
      }
    },
    outinRecord() {
      this.showEnterWriteOff = false
      this.$router.replace({ name: 'MemberInOutRecord' })
    },
    outinRecordb() {
      this.showActivityWriteOff = false
      this.$router.replace({ name: 'SignRecordList' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.Entr_list_warp {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  .item {
    width: 142px;
    height: 128px;
    text-align: center;
    margin: 10px 10px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    text-align: center;
    position: relative;
    padding: 16px 10px;
    .img {
      width: 50px;
      height: 50px;
      margin-bottom: 16px;
    }
    .drag {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
    }
    .checkbox {
      position: absolute;
      top: 4px;
      right: 4px;
    }
  }
  .itemMy {
    width: 102px;
    height: 136px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    .img_wrap {
      width: 100px;
      height: 100px;
      background-color: #f5f7fc;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 60%;
        height: 60%;
      }
      .drag {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
      }
      .checkbox {
        position: absolute;
        top: 4px;
        right: 4px;
      }
    }
    .text {
      height: 32px;
      line-height: 32px;
      background-color: #fff;
    }
  }
}

.verificat_info_wrap {
  .verificat_info-main {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
      height: 380px;
      margin-right: 20px;

      .info_item {
        cursor: pointer;
        padding: 6px 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #dfe2e8;

        h2 {
          padding: 5px 0;
          margin: 0;
          font-size: 16px;
        }

        .line {
          display: flex;
          padding: 5px 0;

          .span6 {
            flex: 5;
            margin-right: 10px;
          }

          .span4 {
            flex: 5;
          }
        }
      }

      .active {
        border: 1px solid #435ebe;
        background: #f4f7fc;
      }

      .default_noticket {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 160px;
        }
      }
    }

    .right {
      width: 220px;
      height: 380px;
      background-color: #f4f7fc;
      padding: 20px;

      .head_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .wrap {
          flex: 1;

          .name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          .phone {
            color: #666666;
          }
        }
      }

      .line {
        margin-top: 20px;

        .key {
          display: inline-block;
          width: 70px;
        }
      }
    }
  }
}
.verificat_footer {
  text-align: left;
  display: flex;
  justify-content: space-between;
  .verificat_num_wrap {
    flex: 1;
  }
}

.canvas {
  box-sizing: content-box;
  background-color: rgba(25, 67, 169, 0.12);
  border-radius: 100%;
  position: relative;
  /* border: 10px solid #435EBE; */
}

.app-main-container {
  background-color: transparent;
}

.initial-config {
  text-align: center;
  cursor: pointer;
  margin-right: 20px;

  .cnfig-icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }

  .title {
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
}

.entrance-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin: 0 -15px;
  margin-bottom: 18px;
  .entrance-item {
    width: calc((100% - 180px) / 6);
    margin: 0 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f7fc;
    color: #222;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;

    &:hover {
      box-shadow: 0 0 5px 1px $menuActive;
    }

    .icon {
      margin-bottom: 20px;
      width: 44px;
    }

    &:last-of-type {
      margin-right: 0;
    }
  }
}

.data-show {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  .item {
    background-color: #f4f7fc;
    width: calc((100% - 90px) / 4);
    border-radius: 8px;
    padding: 30px;
    font-size: 14px;
    color: #333;

    .title {
      font-size: 18px;
      margin-bottom: 28px;
      font-weight: bold;
    }

    .unit-money {
      display: flex;
      justify-content: space-between;

      .num {
        font-size: 18px;
        color: $menuActive;
        font-weight: bold;
        margin-left: 10px;
      }
    }
  }
}

.charts-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .chart-area-booking-box,
  .chart-combo-sell-box,
  .chart-tickets-sell-box {
    height: 380px;
    background-color: #f4f7fc;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    border-radius: 8px;
    .ab_btn {
      position: absolute;
      top: 0;
      right: 0;
      background-color: $primaryColor;
      color: #fff;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 0 8px 0 8px;
      cursor: pointer;
    }
  }

  .chart-area-booking-box,
  .chart-combo-sell-box {
    width: calc((100% - 30px) / 2);
  }

  .chart-tickets-sell-box {
    width: 100%;
  }

  .chart-area-booking {
    flex: 1;
    height: 250px;
    margin: -25px 0;
    display: flex;
    align-items: center;
  }

  .chart-combo-sell {
    height: 240px;
  }

  .chart-tickets-sell {
    height: 240px;
  }

  .title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 20px;
  }
}

.chart-title {
  /* border-bottom: solid 1px #DFE2E8; */
  margin-bottom: 30px;
  height: 38px;
  align-items: center;
  padding-bottom: 10px;
}

.enterWriteOffCode {
  display: flex;
}

.order-type {
  font-weight: 500;
}

.error-style {
  color: #ff4634;
}
.member_info {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item {
    width: 33.33%;
    line-height: 28px;
    height: 28px;
  }
}
</style>
